<template>
    <div class="goods">

        <div id="content">
            <cube-scroll ref="scroll">

                <!--S幻灯-->
                <div id="images">
                    <cube-slide :data="images"></cube-slide>
                </div>
                <!--E幻灯-->

                <!--S价格和其他信息-->
                <div id="header">
                    <div class="price">
                        {{data.price}}{{setting.currency_name}}
                        <p>商品ID:{{goods_id}}</p>
                    </div>
                    <div class="name">{{data.name}}</div>
                    <div class="other">
                        <p>库存：{{data.inventory}}</p>
                        <p>兑换数量：{{data.sales}}</p>
                    </div>
                </div>
                <!--E价格和其他信息-->

                <!--S详情-->
                <div id="detail" ref="detail">
                    <h2>详情</h2>
                    <div class="content" v-html="data.detail"></div>
                </div>
                <!--E详情-->

            </cube-scroll>
        </div>

        <!--S底部-->
        <div id="footer">
            <div class="row">当前{{setting.currency_name}}:{{member.balance}}</div>
            <div class="row">
                <router-link :to="'/goods/create/'+goods_id" class="a">
                    <i class="iconfont icon-gouwu"></i> 兑换
                </router-link>
            </div>
        </div>
        <!--E底部-->

        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="children" />
        </transition>
        <!--E子页面-->

    </div>
</template>

<script>
    import {mapState} from "vuex";
    export default {
        name: "goods",
        data(){
            return {
                transition_name:"",
                goods_id:0,  //商品id
                data:{},  //商品详情
            }
        },
        computed:{
            images(){
              let images = [];
              if(this.data.images_src){
                  for(let i=0;i<this.data.images_src.length;i++){
                      images.push({image:this.data.images_src[i]});
                  }
              }
              return images;
          },
            ...mapState({
                member:"member",
                setting:"setting"
            })
        },
        beforeRouteUpdate(to, from, next){
            this.transition_name = to.path.split('/').length < from.path.split('/').length ? "animate__animated animate__slideOutRight animate__faster animate__delay-2s" : "animate__animated animate__slideInRight animate__faster animate__delay-2s";
            setTimeout(()=>{
                next();
            },10);
        },
        created() {
            let {goods_id} = this.$route.params;
            this.goods_id = goods_id;
            this.getGoods();
        },
        methods:{
            //Run
            /**
             * 获取商品
             */
            getGoods(){
                this.$url("goods/getGoodsApp",{
                    goods_id:this.goods_id
                })
                .then((res)=>{
                    if(res.data.status === "success"){
                        this.data = res.data.data;
                        this.$nextTick(()=>{
                            let detail_images = this.$refs.detail.querySelectorAll("img");
                            detail_images.forEach((item)=>{
                                item.addEventListener("load",()=>{
                                    this.$refs.scroll.refresh();
                                });
                            });
                        });
                    }
                });
            },
        }
    }
</script>

<style scoped lang="less" src="./goods.less"></style>

<style lang="stylus">
    .goods #images img
        width 100%
        height 100%
        object-fit cover
    .goods #detail img
        width 100%
        height auto
        display block
</style>